<template>
  <!-- 通知人联系方式 -->
  <el-dialog
    :title="dialogType + '通知人信息'"
    :visible.sync="dialogVisible"
    :before-close="closedialog"
    width="800"
    append-to-body
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        ref="formData"
        :model="form"
        :rules="rules"
        label-width="148px"
        label-suffix=":"
        size="mini"
        class="flex-form bill-form"
      >
        <el-form-item label="通知人代码" prop="notifyPersonCode">
          <el-input
            v-model="form.notifyPersonCode"
            placeholder="请输入通知人代码"
          />
        </el-form-item>
        <el-form-item label="通知人名称" prop="notifyPersonName">
          <el-input
            v-model="form.notifyPersonName"
            placeholder="请输入通知人名称"
          />
        </el-form-item>
        <el-form-item label="通讯方式类别代码" prop="communicationTypeText">
          <el-select
            v-model="form.communicationTypeText"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option v-for="(item, index) in communiType" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系号码" prop="personPhone">
          <el-input v-model="form.personPhone" placeholder="请输入联系号码" />
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button
            v-if="dialogType == '新增'"
            type="success"
            plain
            @click="addForm"
            size="mini"
            >添加通知人</el-button
          >
          <el-button v-else type="success" plain @click="editForm" size="mini"
            >保存修改</el-button
          >
        </el-form-item>
      </el-form>

      <basic-table
        ref="tableList"
        :columns="columns"
        :tableData="tableData"
        :needPagination="false"
      >
        <template #operate="scope">
          <div class="option-menu">
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleClickEdit(scope.index, scope.row)"
              v-hasPermi="['system:costStopConfig:edit']"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleDelete(scope.index, tableData)"
              v-hasPermi="['system:costStopConfig:delete']"
            >
              删除
            </el-button>
          </div>
        </template>
      </basic-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm"
        size="small"
        v-if="dialogType != 'detail'"
        >确定</el-button
      >
      <el-button @click="closedialog('formData')" size="small">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "senderAddEdit",
  props: {
    // 联系方式类型
    communiType: {
      type: Array,
      default: () => []
    },
    inputName: {
      type: String
    },
    notifyPersonList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          prop: "notifyPersonName",
          label: "通知人名称",
          align: "center",
        },
        {
          prop: "communicationTypeText",
          label: "通讯方式类别代码",
          align: "center",
        },
        {
          prop: "personPhone",
          label: "联系号码",
          align: "center",
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 150,
          fixed: "right",
        },
      ],
      dialogVisible: false,
      dialogType: "新增",
      editIndex: null,
      form: {},
      rules: {
        notifyPersonName: [
          {
            required: true,
            message: "联系人名称不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    initForm() {
      this.form = {
        notifyPersonCode: null,
        notifyPersonName: null,
        communicationTypeText: null,
        personPhone: null,
      };
    },
    handleAdd() {
      this.initForm();
      this.dialogType = "新增";
    },
    open() {
      this.dialogVisible = true;
      this.initForm();
      if(this.notifyPersonList.length > 0) {
        this.tableData = this.notifyPersonList;
      }
      if(this.inputName) {
        this.form.notifyPersonName = this.inputName;
      }
    },
    closedialog() {
      this.$refs["formData"].resetFields();
      this.tableData = [];
      this.dialogVisible = false;
    },
    handleClickEdit(index, row) {
      this.dialogType = "编辑";
      this.editIndex = index;
      this.form = JSON.parse(JSON.stringify(row));
    },
    handleDelete(index, rows) {
      rows.splice(index, 1);
    },
    addForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.tableData.push(this.form);
          this.dialogType == "新增";
          this.initForm();
        }
      });
    },
    editForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, this.form);
          this.dialogType = "新增";
          this.initForm();
        }
      });
    },
    submitForm() {
      this.$emit("submitNotifierInfo", this.tableData);
      this.closedialog();
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-empty {
  padding: 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
::v-deep .el-table {
  th {
    background-color: #ECF5FF;
    color: #333;
  }
}
</style>
